<%--
  Created by IntelliJ IDEA.
  User: yingzi
  Date: 2017-6-14
  Time: 14:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style type="text/css">
        .code{
            position: relative;
            padding: 15px 15px 15px;
            margin: -15px -15px 15px;
            border:1px solid #e5e5e5;
            background: #f7f7f9;
            -webkit-box-shadow: inset 0 3px 6px rgba(0, 0, 0, .05);
            box-shadow: inset 0 3px 6px rgba(0, 0, 0, .05);
        }
    </style>
</head>
<body>
<pre class="code">
        &lt;input onclick="laydate()" &gt;
        这是是一个最简单的调用方式，它会把自身作为目标元素。除此之外，您还可以按照需求传入一些其它key，比如：
        &lt;input onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">
        那么对于输入框，如果用户乱填怎么办？没关系，laydate会智能纠错，你可以尝试在上述表单输入任意值，然后点击页面其它处测试一下。
        当然，您其实还可以设定任何html元素作为目标对象，又比如：&lt;div onclick="laydate()">
</pre>
<div>
    日期样式：<input id="txt1" placeholder="请输入日期" class="laydate-icon" onclick="laydate({festival: true})">
</div>
<br/>
<div>
    日期时间：<input id="txt2" placeholder="请输入日期" class="laydate-icon" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss',start: '2017-6-15 23:12:20'})">
</div>
<br/>
<div>
    代码指定：<input id="txtDate" placeholder="请输入日期" >
</div>
<br/>
<div style="margin-left: 55px;">
    <button onclick="getValue()">获得日期的值</button>
</div>
</body>
<script type="text/javascript" src="<%=request.getContextPath()%>/static/jquery/jquery-1.11.0.min.js"></script>
<script src="laydate.js"></script>
<script type="text/javascript">
    laydate({
        elem: '#txtDate', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
        event: 'focus' //响应事件。如果没有传入event，则按照默认的click
        ,format: 'YYYY-MM-DD', // 分隔符可以任意定义，该例子表示只显示年月
        festival: true //显示节日
        ,choose: function(datas){ //选择日期完毕的回调
            alert('得到：'+datas);
        }
    });
    
    function getValue() {
        var v1=$("#txt1").val();
        var v2=$("#txt2").val();
        var v3=$("#txtDate").val();
        alert(v1+"  "+v2+"   "+v3);
    }
</script>
</html>
